<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生请假</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/student_leave.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../student/css/head.css">
    <link rel="stylesheet" href="../css/window.css">
    <style scoped>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="contain">
            <div class="header">
                <div class="header_title">学生请假</div>
                <a onclick="history.back()">
                    <img src="../image/return.png" alt="" class="return">
                </a>
            </div>
            <div style="height: 40px;"></div>
            <div class="leave_content" id="vue-root">
                <div class="leave_head">
                    <div class="leave_head_tab_box">
                        <div class="leave_head_tab" :class="{'read':isread==1}" @click="isread=1">已读</div>
                        <div class="leave_head_tab" :class="{'read':isread==2}" @click="isread=2">未读</div>
                    </div>
                    <div class="leave_head_nav_box" v-if="isread==1">
                        <div class="leave_head_nav" :class="{'leave_head_nav_select':curNav==item.type}"
                            @click="curNav=item.type" v-for="item in navList" :key="item.type">
                            {{item.text}}
                        </div>
                    </div>
                    <div class="leave_head_nav_box" v-if="isread==2">
                        <div class="leave_head_nav leave_head_nav_select">
                            审核中
                        </div>
                    </div>
                </div>
                <div class="leave_list_box" :style="{'height':heights+'px'}">
                    <div class="leave_list_item" v-for="(item,i) in list" :key="i">
                        <div class="leave_list_item_top">
                            <div class="top_box_left">
                                <div><img class="top_cox_img" src="../image/img/user.jpg" alt="">{{item.name}}</div>
                                <div class="top_box_left_text"><span>具体事由</span>&nbsp;&nbsp;<span>{{item.liyou}}</span>
                                </div>
                                <div class="top_box_left_text"><span>请假类别</span>&nbsp;&nbsp;<span>事假</span></div>
                            </div>
                            <div class="shenhe_img">
                                <img src="../image/img/tongyi_icon.png" v-if="item.isconsent==1" alt="">
                                <img src="../image/img/jujue_icon.png" v-if="item.isconsent==2" alt="">
                                <img src="../image/img/shenhe_icon.png" v-if="item.isconsent==3&&isread==2" alt="">
                            </div>
                        </div>
                        <div class="border"></div>
                        <div class="leave_list_item_bottom">
                            <div>申请时间</div>
                            <div>开始时间:&nbsp;&nbsp;{{item.kaihsi}}</div>
                            <div>结束时间:&nbsp;&nbsp;{{item.jishu}}</div>
                            <div class="del" v-if="item.isconsent!=3">
                                <img class="delImg" @click="" src="../image/img/del.png" alt="">
                                删除
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mask_layer" v-if="mask" v-cloak>
                    <div class="mask_item" style="width: 77%;padding: 30px;">
                        <div class="mask_box">
                            <div class="mask_item_title">选择班级<van-icon name="arrow-down" color="#e1e1e1" size="17" />
                            </div>
                            <div class="mask_item_content">
                                <div class="mask_item_content_tb" v-for="(item,i) in classess" :key="i"
                                    :class="{'mask_item_content_tb_select':classesId==item.id}"
                                    @click="classesId=item.id">
                                    <span class="mask_item_content_tb_tr borderRight">{{item.name}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="confirmBtn" @click="confirmBtn()">确定</div>
                    </div>
                    <div class="cancel" @click="mask=false" />
                </div>
            </div>

        </div>
    </div>

    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>

    <script src="/js/common.js"></script>

    <script>
        var app = new Vue({
            el: '#vue-root',
            data: {
                heights: '',
                list: [],
                mask: false,
                isread: null,//1:已读 2：未读
                curNav: 1,
                navList: [
                    { text: '全部', type: 1 },
                    { text: '已同意', type: 2 },
                    { text: '已拒绝', type: 3 },
                    { text: '待审核', type: 4 },
                ]
            },
            methods: {
                format: function (time) {
                    if (!time) return '';
                    return dayjs(time).format('YYYY-MM-DD HH:mm');
                },
                img: function (status) {
                    var prefix = '/wechat/image/';
                    if (status == 0) return prefix + 'leave_unread.svg';
                    if (status == 1 || status == 2) return prefix + 'leave_read.svg';
                },
                style: function (status) {
                    var color = ['yellow', 'green', 'red'][status];
                    return {
                        color: color,
                        'border-color': color
                    };
                }
            },
            created: function () {
                this.isread = 1
                this.heights = document.body.clientHeight - 165
                // axios.get('/t/leave').then(function (res) {
                //     this.list = res.data;
                // }.bind(this));
            },
            watch: {
                isread(e) {
                    if (e == 1) {
                        console.log('e===1');
                        this.list = [
                            {
                                name: '张三',
                                liyou: '没有',
                                isconsent: 1,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                            {
                                name: '张三',
                                liyou: '没有',
                                isconsent: 2,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                            {
                                name: '张三',
                                liyou: '没有',
                                isconsent: 1,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                            {
                                name: '张三',
                                liyou: '没有',
                                isconsent: 2,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                        ]
                    } else if (e == 2) {
                        this.list = [
                            {
                                name: '李四',
                                liyou: '没有',
                                isconsent: 3,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                            {
                                name: '李四',
                                liyou: '没是的发生多发点客家话阿斯卡绝代风华尽快有',
                                isconsent: 3,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                            {
                                name: '李四',
                                liyou: '没有',
                                isconsent: 3,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                            {
                                name: '李四',
                                liyou: '没有',
                                isconsent: 3,
                                kaihsi: '2001-20-30',
                                jishu: '2001-20-30'
                            },
                        ]
                        console.log('e===2');
                    }
                }
            }
        });

        updateUnread('leave');

    </script>

</body>

</html>